<template>
    <view class="library-view-content">
        <view class="content-header">
            <view class="content-image">
                <image class="image"></image>
            </view>

            <view class="info">
                <view class="info-title">汉服文化标题</view>

                <view class="info-author">
                    <view class="author-avatar">
                        <image class="avatar" src="/static/logo.png"></image>
                    </view>

                    <view class="user-name"> yhm </view>
                </view>

                <view class="info-tag">
                    <view class="tag">标签</view>
                </view>
            </view>
        </view>

        <view class="content-info">
            <view class="info-appraise">
                <view class="info-appraise-title">9.7分</view>
                <view class="info-appraise-content">已有{{}}人评论</view>
            </view>
            <view class="info-reading">
                <view class="info-reading-title">{{}} 人</view>
                <view class="info-reading-content">正在阅读</view>
            </view>
            <view class="info-popularity">
                <view class="info-popularity-title">第{{}}名</view>
                <view class="info-popularity-content">人气排行</view>
            </view>
        </view>

        <!-- 简介内容 -->
        <view class="content-introduction">
            <view class="introduction-title">简介</view>
            <view
                class="introduction-content"
                :class="{ ellipsis: !isExpanded }"
                >{{ introductionText }}</view
            >
            <view
                class="introduction-button"
                v-if="showExpandBtn"
                @click="toggleExpand"
            >
                <view class="name">{{ isExpanded ? '收起' : '展开' }}</view>

                <han-icon
                    :name="isExpanded ? 'arrow_up' : 'arrow_down'"
                    class="arrow-icon"
                    size="36"
                />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 简介文本
const introductionText = ref(
    '汉服，即华夏衣冠，又被称为汉装，华服，是汉族的传统民族服饰，传承五千年，历史悠久。相传汉服起源于黄帝时代，出现了原始的农业和纺织业，开始用麻布做衣服，后来又发明了养蚕和丝纺，人的衣冠服饰日趋完善，黄帝时代冕冠的出现，服饰制度逐渐形成。'
);

// 是否展开
const isExpanded = ref(false);

// 是否需要显示展开按钮
const showExpandBtn = ref(false);

// 切换展开/收起状态
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
};

// 检查是否需要显示展开按钮
onMounted(() => {
    // 在真实项目中，这里可以使用uni.createSelectorQuery()来检测内容高度
    // 这里简单模拟：如果内容长度超过100字符，则显示展开按钮
    if (introductionText.value.length > 100) {
        showExpandBtn.value = true;
    }
});
</script>

<style scoped lang="scss">
.library-view-content {
    background: transparent;
    padding: 20rpx;

    .content-header {
        width: 100%;
        height: 100%;
        display: flex;

        .content-image {
            width: 400rpx;
            height: 300rpx;
            border-radius: $uni-font-size-base;
            overflow: hidden;

            .image {
                width: 100%;
                height: 100%;
                background: #a3a3a3;
            }
        }

        .info {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding-left: 20rpx;

            .info-title {
                font-size: $han-font-size-lg;
                font-weight: bold;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .info-author {
                display: flex;
                align-items: center;
                margin-top: 20rpx;

                .author-avatar {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    overflow: hidden;

                    .avatar {
                        width: 100%;
                        height: 100%;
                        background: #a3a3a3;
                    }
                }

                .user-name {
                    font-size: $han-font-size-base;
                    font-weight: 600;
                    color: $han-global-primary-font-color;
                    margin-left: 10rpx;
                }
            }

            .info-tag {
                display: flex;
                gap: 10rpx;
                flex-wrap: wrap;
                margin-top: 20rpx;

                .tag {
                    font-size: $han-font-size-xs;
                    color: $han-primary-color;
                    padding: 5rpx 10rpx;
                    border: 1rpx solid $han-primary-color;
                    border-radius: $han-border-radius-sm;
                }
            }
        }
    }

    .content-info {
        width: 100%;
        height: 100%;
        display: flex;
        margin: 20rpx 0;
        padding: 20rpx;
        border: 1rpx solid $han-global-border-color;
        border-radius: $han-border-radius-lg;

        .info-appraise,
        .info-reading,
        .info-popularity {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1rpx solid $han-global-border-color;

            &:last-child {
                border-right: none;
            }

            .info-appraise-title,
            .info-reading-title,
            .info-popularity-title {
                font-size: $han-font-size-lg;
                font-weight: bold;
                color: $han-primary-color;
            }
        }
    }

    .content-introduction {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        border: 1rpx solid $han-global-border-color;
        border-radius: $han-border-radius-lg;

        .introduction-title {
            font-size: $han-font-size-lg;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .introduction-content {
            font-size: $han-font-size-base;
            color: $han-global-primary-font-color;
            line-height: $han-line-height-base;

            &.ellipsis {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .introduction-button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20rpx;
            border-top: 1rpx solid $han-global-border-color;

            .name {
                font-size: $han-font-size-lg;
                font-weight: bold;
                padding: 10rpx 20rpx 0 0;
            }

            .arrow-icon {
                margin-top: 15rpx;
            }
        }
    }
}
</style>
